<template>
    <view class="music-player" v-if="currentSong">
        <!-- 播放器背景遮罩 -->
        <view class="player-overlay" v-if="showPlayer" @click="hidePlayer"></view>
        
        <!-- 播放器主体 -->
        <view class="player-container" :class="{ 'player-expanded': showPlayer }">
            <!-- 底部播放栏 -->
            <view class="player-bar" @click="togglePlayer">
                <image :src="currentSong.cover_url || '/static/logo.png'" class="player-image"></image>
                <view class="player-info">
                    <text class="player-title">{{ currentSong.title }}</text>
                    <text class="player-artist">{{ currentSong.artist }}</text>
                </view>
                <view class="player-controls">
                    <text class="icon" @click.stop="togglePlay">
                        {{ isPlaying ? '⏸️' : '▶️' }}
                    </text>
                    <text class="icon" @click.stop="showPlayer = true">≡</text>
                    <text class="debug-icon" @click.stop="debugAudio" style="font-size: 10px; color: #999;">调试</text>
                </view>
            </view>

            <!-- 展开的播放器界面 -->
            <view class="expanded-player" v-if="showPlayer">
                <!-- 顶部控制栏 -->
                <view class="expanded-header">
                    <text class="back-btn" @click="hidePlayer">‹</text>
                    <text class="player-title">{{ currentSong.title }}</text>
                    <text class="more-btn" @click="showMoreOptions">⋯</text>
                </view>

                <!-- 专辑封面 -->
                <view class="album-cover">
                    <image :src="currentSong.cover_url || '/static/logo.png'" 
                           class="cover-image" 
                           :class="{ 'rotating': isPlaying }"></image>
                </view>

                <!-- 歌曲信息 -->
                <view class="song-details">
                    <text class="song-title">{{ currentSong.title }}</text>
                    <text class="song-artist">{{ currentSong.artist }}</text>
                </view>

                <!-- 进度条 -->
                <view class="progress-container">
                    <text class="time">{{ formatTime(currentTime) }}</text>
                    <view class="progress-bar" @click="seekTo">
                        <view class="progress-bg"></view>
                        <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
                        <view class="progress-thumb" :style="{ left: progressPercent + '%' }"></view>
                    </view>
                    <text class="time">{{ formatTime(duration) }}</text>
                </view>

                <!-- 控制按钮 -->
                <view class="control-buttons">
                    <text class="control-btn" @click="previousSong">⏮️</text>
                    <text class="control-btn play-btn" @click="togglePlay">
                        {{ isPlaying ? '⏸️' : '▶️' }}
                    </text>
                    <text class="control-btn" @click="nextSong">⏭️</text>
                </view>

                <!-- 音量控制 -->
                <view class="volume-container">
                    <text class="volume-icon">🔊</text>
                    <view class="volume-bar" @click="adjustVolume">
                        <view class="volume-bg"></view>
                        <view class="volume-fill" :style="{ width: volume + '%' }"></view>
                        <view class="volume-thumb" :style="{ left: volume + '%' }"></view>
                    </view>
                </view>

                <!-- 播放模式 -->
                <view class="play-mode">
                    <text class="mode-btn" @click="togglePlayMode">
                        {{ playModeIcon }}
                    </text>
                    <text class="mode-text">{{ playModeText }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'MusicPlayer',
    props: {
        song: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            currentSong: null,
            isPlaying: false,
            currentTime: 0,
            duration: 0,
            volume: 50,
            showPlayer: false,
            playMode: 'list', // list, single, random
            audioContext: null
        }
    },
    computed: {
        progressPercent() {
            if (this.duration === 0) return 0;
            return (this.currentTime / this.duration) * 100;
        },
        playModeIcon() {
            const modes = {
                list: '🔁',
                single: '🔂',
                random: '🔀'
            };
            return modes[this.playMode];
        },
        playModeText() {
            const texts = {
                list: '列表循环',
                single: '单曲循环',
                random: '随机播放'
            };
            return texts[this.playMode];
        }
    },
    watch: {
        song: {
            handler(newSong) {
                if (newSong) {
                    this.currentSong = newSong;
                    this.loadSong();
                }
            },
            immediate: true
        }
    },
    mounted() {
        this.initAudio();
    },
    beforeDestroy() {
        if (this.audioContext) {
            this.audioContext.destroy();
        }
    },
    methods: {
        initAudio() {
            // 初始化音频上下文
            this.audioContext = uni.createInnerAudioContext();
            // 提升微信端兼容性
            try {
                // 小程序端支持 obeyMuteSwitch，设为 false 以避免静音开关影响
                this.audioContext.obeyMuteSwitch = false;
                // 不自动播放，统一在 canplay 后播放
                this.audioContext.autoplay = false;
                // 起始时间重置
                this.audioContext.startTime = 0;
            } catch(e) {
                // 兼容其他端
            }
            this.audioContext.onPlay(() => {
                console.log('音频开始播放');
                this.isPlaying = true;
            });
            this.audioContext.onPause(() => {
                console.log('音频暂停');
                this.isPlaying = false;
            });
            this.audioContext.onTimeUpdate(() => {
                this.currentTime = this.audioContext.currentTime;
            });
            this.audioContext.onCanplay(() => {
                this.duration = this.audioContext.duration;
            });
            this.audioContext.onEnded(() => {
                this.onSongEnded();
            });
            this.audioContext.onError((err) => {
                console.error('音频播放错误:', err);
                
                // 更详细的错误提示
                let errorMsg = '播放失败';
                if (err.errMsg) {
                    if (err.errMsg.includes('decode')) {
                        errorMsg = '音频格式不支持或文件损坏';
                    } else if (err.errMsg.includes('network')) {
                        errorMsg = '网络错误，请检查网络连接';
                    } else if (err.errMsg.includes('404')) {
                        errorMsg = '音频文件不存在';
                    }
                }
                
                uni.showToast({
                    title: errorMsg,
                    icon: 'none',
                    duration: 3000
                });
                
                // 播放失败时自动跳到下一首
                setTimeout(() => {
                    this.$emit('next');
                }, 1500);
            });
        },
        
        loadSong() {
            if (this.currentSong && this.audioContext) {
                // 支持多种音频URL字段名
                let audioUrl = this.currentSong.audio_url || this.currentSong.song_url || this.currentSong.url;
                
                console.log('准备加载歌曲:', {
                    title: this.currentSong.title,
                    originalUrl: audioUrl,
                    songObject: this.currentSong
                });
                
                // 标准化本地静态/Windows路径
                if (audioUrl) {
                    // 将反斜杠改为正斜杠，兼容 Windows 写法 static\xxx.mp3
                    audioUrl = String(audioUrl).replace(/\\\\/g, '/').replace(/\\/g, '/');
                    // 去掉 ./ 前缀
                    if (audioUrl.startsWith('./')) audioUrl = audioUrl.slice(1);
                    // 统一 static 资源前缀
                    if (audioUrl.startsWith('static/')) {
                        audioUrl = '/' + audioUrl; // -> /static/xxx.mp3
                    }
                    // 确保 static 路径以 / 开头
                    if (audioUrl.startsWith('static/')) {
                        audioUrl = '/' + audioUrl;
                    }
                    console.log('标准化后的音频URL:', audioUrl);
                }
                
                console.log('最终音频URL:', audioUrl);
                
                if (!audioUrl) {
                    // 通用兜底：如果未提供音频地址，尝试使用项目内示例本地资源
                    audioUrl = '/static/brightest_star.mp3';
                    console.warn('未提供音频URL，使用兜底音频:', audioUrl);
                }
                
                // 重置播放状态
                this.currentTime = 0;
                this.duration = 0;
                this.isPlaying = false;
                
                // 设置事件监听器
                this.setupAudioEventListeners();
                
                // #ifdef MP-WEIXIN
                // 微信小程序：
                // 1) 如果是本地打包资源 /static/ 或 wxfile:// 临时/持久路径，直接设置 src 播放，不走下载
                if (audioUrl.startsWith('/static/') || audioUrl.startsWith('wxfile://') || audioUrl.startsWith('file://') || audioUrl.startsWith('blob:')) {
                    console.log('播放本地静态文件:', audioUrl);
                    
                    // 对于微信小程序的静态文件，需要特殊处理
                    if (audioUrl.startsWith('/static/')) {
                        console.log('处理微信小程序静态文件:', audioUrl);
                        
                        try {
                            this.audioContext.stop && this.audioContext.stop();
                            this.audioContext.src = '';
                            this.audioContext.startTime = 0;
                        } catch(_) {}
                        
                        // 微信小程序中，静态文件路径直接使用，不需要去掉斜杠
                        this.audioContext.src = audioUrl;
                        console.log('设置音频源:', audioUrl);
                        
                        this.audioContext.onCanplay(() => {
                            console.log('本地音频可以播放，时长:', this.audioContext.duration);
                            this.duration = this.audioContext.duration || 0;
                            console.log('本地音频已准备就绪，等待用户播放');
                        });
                        this.audioContext.onError((err) => {
                            console.error('本地音频播放错误:', err);
                            uni.showToast({
                                title: '本地音频播放失败',
                                icon: 'none'
                            });
                        });
                        return;
                    }
                    
                    // 处理其他静态文件路径（如 static/xxx.mp3）
                    if (audioUrl.startsWith('static/')) {
                        console.log('处理静态文件路径:', audioUrl);
                        
                        try {
                            this.audioContext.stop && this.audioContext.stop();
                            this.audioContext.src = '';
                            this.audioContext.startTime = 0;
                        } catch(_) {}
                        
                        this.audioContext.src = audioUrl;
                        this.audioContext.onCanplay(() => {
                            console.log('静态音频可以播放，时长:', this.audioContext.duration);
                            this.duration = this.audioContext.duration || 0;
                            // 不自动播放，让用户手动控制
                            console.log('静态音频已准备就绪，等待用户播放');
                        });
                        this.audioContext.onError((err) => {
                            console.error('静态音频播放错误:', err);
                            uni.showToast({
                                title: '静态音频播放失败',
                                icon: 'none'
                            });
                        });
                        return;
                    }
                    
                    // 其他本地文件路径
                    try {
                        this.audioContext.stop && this.audioContext.stop();
                        this.audioContext.src = '';
                        this.audioContext.startTime = 0;
                    } catch(_) {}
                    this.audioContext.src = audioUrl;
                    this.audioContext.onCanplay(() => {
                        console.log('本地音频可以播放，时长:', this.audioContext.duration);
                        this.duration = this.audioContext.duration || 0;
                        // 不自动播放，让用户手动控制
                        console.log('本地音频已准备就绪，等待用户播放');
                    });
                    this.audioContext.onError((err) => {
                        console.error('本地音频播放错误:', err);
                        uni.showToast({
                            title: '本地音频播放失败',
                            icon: 'none'
                        });
                    });
                    return;
                }

                // 2) 其他网络地址，先下载再播放，避免解码/跨域问题
                const downloadUrl = audioUrl.includes('?') ? `${audioUrl}&_t=${Date.now()}` : `${audioUrl}?_t=${Date.now()}`;
                console.log('微信端准备下载音频:', downloadUrl);
                uni.showLoading({ title: '加载音频...', mask: true });
                uni.downloadFile({
                    url: downloadUrl,
                    success: (res) => {
                        uni.hideLoading();
                        if (res.statusCode === 200 && res.tempFilePath) {
                            try {
                                this.audioContext.stop && this.audioContext.stop();
                                this.audioContext.src = '';
                                this.audioContext.startTime = 0;
                            } catch(_) {}
                            this.audioContext.src = res.tempFilePath;
                            this.audioContext.onCanplay(() => {
                                this.duration = this.audioContext.duration || 0;
                                // 不自动播放，让用户手动控制
                                console.log('下载的音频已准备就绪，等待用户播放');
                            });
                        } else {
                            uni.showToast({ title: '音频下载失败', icon: 'none' });
                        }
                    },
                    fail: (err) => {
                        uni.hideLoading();
                        console.error('下载音频失败:', err);
                        uni.showToast({ title: '网络错误，无法下载音频', icon: 'none' });
                    }
                });
                return;
                // #endif
                
                // 非微信端：直接设置音频源（设置前清理旧状态）
                if (typeof wx !== 'undefined') {
                    // 微信环境：前面已下载并 return，这里不再走直链
                    return;
                }
                try {
                    this.audioContext.stop && this.audioContext.stop();
                    this.audioContext.offCanplay && this.audioContext.offCanplay();
                    this.audioContext.offError && this.audioContext.offError();
                    this.audioContext.src = '';
                    this.audioContext.startTime = 0;
                } catch (e) {
                    console.warn('清理旧音频状态失败:', e);
                }
                this.audioContext.src = audioUrl;
                
                // 预加载音频
                this.audioContext.onCanplay(() => {
                    console.log('音频可以播放，时长:', this.audioContext.duration);
                    this.duration = this.audioContext.duration || 0;
                });
                
                console.log('音频源已设置:', audioUrl);
            }
        },
        
        // 设置音频事件监听器
        setupAudioEventListeners() {
            if (!this.audioContext) return;
            
            // 清除之前的事件监听器
            this.audioContext.offPlay && this.audioContext.offPlay();
            this.audioContext.offPause && this.audioContext.offPause();
            this.audioContext.offTimeUpdate && this.audioContext.offTimeUpdate();
            this.audioContext.offCanplay && this.audioContext.offCanplay();
            this.audioContext.offEnded && this.audioContext.offEnded();
            this.audioContext.offError && this.audioContext.offError();
            
            // 重新设置事件监听器
            this.audioContext.onPlay(() => {
                console.log('音频开始播放');
                this.isPlaying = true;
            });
            this.audioContext.onPause(() => {
                console.log('音频暂停');
                this.isPlaying = false;
            });
            this.audioContext.onTimeUpdate(() => {
                this.currentTime = this.audioContext.currentTime;
            });
            this.audioContext.onCanplay(() => {
                this.duration = this.audioContext.duration;
            });
            this.audioContext.onEnded(() => {
                this.onSongEnded();
            });
            this.audioContext.onError((err) => {
                console.error('音频播放错误:', err);
                this.isPlaying = false;
                uni.showToast({
                    title: '音频播放失败',
                    icon: 'none'
                });
            });
        },
        
        togglePlay() {
            if (this.isPlaying) {
                console.log('暂停播放');
                try {
                    this.audioContext.pause();
                    this.isPlaying = false; // 手动设置状态
                } catch (e) {
                    console.error('暂停失败:', e);
                    this.isPlaying = false;
                }
            } else {
                console.log('开始播放');
                this.forcePlay();
            }
        },
        
        // 强制播放方法
        forcePlay() {
            try {
                // 获取当前歌曲的音频URL
                let audioUrl = this.currentSong.audio_url || this.currentSong.song_url || this.currentSong.url;
                
                if (!audioUrl) {
                    console.error('没有音频URL');
                    uni.showToast({
                        title: '没有音频文件',
                        icon: 'none'
                    });
                    return;
                }
                
                console.log('准备播放音频:', audioUrl);
                
                // 销毁旧的音频上下文
                if (this.audioContext) {
                    try {
                        this.audioContext.destroy();
                    } catch (e) {
                        console.log('销毁旧音频上下文失败:', e);
                    }
                }
                
                // 创建新的音频上下文
                this.audioContext = uni.createInnerAudioContext();
                this.audioContext.src = audioUrl;
                this.audioContext.volume = 1.0;
                this.audioContext.obeyMuteSwitch = false;
                
                // 设置事件监听
                this.audioContext.onPlay(() => {
                    console.log('音频开始播放');
                    this.isPlaying = true;
                });
                
                this.audioContext.onError((err) => {
                    console.error('音频播放错误:', err);
                    this.isPlaying = false;
                    uni.showToast({
                        title: '播放失败: ' + (err.errMsg || '未知错误'),
                        icon: 'none'
                    });
                });
                
                this.audioContext.onCanplay(() => {
                    console.log('音频可以播放');
                    this.duration = this.audioContext.duration || 0;
                });
                
                // 开始播放
                this.audioContext.play();
                
            } catch (e) {
                console.error('播放失败:', e);
                this.isPlaying = false;
                uni.showToast({
                    title: '播放失败，请重试',
                    icon: 'none'
                });
            }
        },
        
        // 调试音频播放
        debugAudio() {
            console.log('=== 调试音频播放 ===');
            console.log('当前歌曲:', this.currentSong);
            console.log('音频上下文:', this.audioContext);
            console.log('播放状态:', this.isPlaying);
            
            if (this.currentSong) {
                const audioUrl = this.currentSong.audio_url || this.currentSong.song_url || this.currentSong.url;
                console.log('音频URL:', audioUrl);
                
                // 直接测试播放
                const testAudio = uni.createInnerAudioContext();
                testAudio.src = audioUrl;
                testAudio.volume = 1.0;
                testAudio.obeyMuteSwitch = false;
                
                testAudio.onPlay(() => {
                    console.log('测试音频开始播放');
                    uni.showToast({
                        title: '测试播放成功',
                        icon: 'success'
                    });
                });
                
                testAudio.onError((err) => {
                    console.error('测试音频播放失败:', err);
                    uni.showToast({
                        title: '测试播放失败: ' + (err.errMsg || '未知错误'),
                        icon: 'none'
                    });
                });
                
                testAudio.play();
            } else {
                uni.showToast({
                    title: '没有选择歌曲',
                    icon: 'none'
                });
            }
        },
        
        previousSong() {
            this.$emit('previous');
        },
        
        nextSong() {
            this.$emit('next');
        },
        
        onSongEnded() {
            this.isPlaying = false;
            this.currentTime = 0;
            
            // 根据播放模式决定下一步操作
            switch (this.playMode) {
                case 'single':
                    this.audioContext.seek(0);
                    this.audioContext.play();
                    break;
                case 'random':
                case 'list':
                default:
                    this.$emit('next');
                    break;
            }
        },
        
        togglePlayMode() {
            const modes = ['list', 'single', 'random'];
            const currentIndex = modes.indexOf(this.playMode);
            this.playMode = modes[(currentIndex + 1) % modes.length];
        },
        
        seekTo(e) {
            if (!this.audioContext || this.duration === 0) return;
            
            const rect = e.currentTarget.getBoundingClientRect();
            const clickX = e.detail.x - rect.left;
            const percent = clickX / rect.width;
            const newTime = percent * this.duration;
            
            this.audioContext.seek(newTime);
        },
        
        adjustVolume(e) {
            const rect = e.currentTarget.getBoundingClientRect();
            const clickX = e.detail.x - rect.left;
            const percent = Math.max(0, Math.min(100, (clickX / rect.width) * 100));
            
            this.volume = percent;
            if (this.audioContext) {
                this.audioContext.volume = this.volume / 100;
            }
        },
        
        togglePlayer() {
            this.showPlayer = !this.showPlayer;
        },
        
        hidePlayer() {
            this.showPlayer = false;
        },
        
        showMoreOptions() {
            uni.showActionSheet({
                itemList: ['添加到播放列表', '分享', '下载', '查看歌词'],
                success: (res) => {
                    switch (res.tapIndex) {
                        case 0:
                            this.$emit('add-to-playlist', this.currentSong);
                            break;
                        case 1:
                            this.$emit('share', this.currentSong);
                            break;
                        case 2:
                            this.$emit('download', this.currentSong);
                            break;
                        case 3:
                            this.$emit('show-lyrics', this.currentSong);
                            break;
                    }
                }
            });
        },
        
        formatTime(seconds) {
            if (!seconds || isNaN(seconds)) return '0:00';
            
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
    }
}
</script>

<style scoped>
.music-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.player-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

.player-container {
    position: relative;
    z-index: 1002;
}

.player-expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 1003;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* 底部播放栏 */
.player-bar {
    height: 140rpx;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border-top: 1rpx solid rgba(102, 126, 234, 0.1);
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 -8rpx 32rpx rgba(102, 126, 234, 0.15);
    backdrop-filter: blur(20rpx);
}

.player-image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.player-image:active {
    transform: scale(0.95);
}

.player-info {
    flex: 1;
    min-width: 0;
}

.player-title {
    font-size: 30rpx;
    font-weight: 600;
    display: block;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6rpx;
}

.player-artist {
    font-size: 24rpx;
    color: #95a5a6;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.icon {
    font-size: 44rpx;
    color: #667eea;
    padding: 12rpx;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: rgba(102, 126, 234, 0.1);
}

.icon:active {
    transform: scale(0.9);
    background: rgba(102, 126, 234, 0.2);
}

.debug-icon {
    font-size: 20rpx;
    color: #95a5a6;
    padding: 8rpx;
}

/* 展开的播放器 */
.expanded-player {
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: white;
    padding: 50rpx 40rpx;
}

.expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80rpx;
}

.back-btn, .more-btn {
    font-size: 48rpx;
    padding: 12rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s ease;
}

.back-btn:active, .more-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.25);
}

.album-cover {
    display: flex;
    justify-content: center;
    margin-bottom: 60rpx;
}

.cover-image {
    width: 520rpx;
    height: 520rpx;
    border-radius: 50%;
    box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.4);
    border: 8rpx solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.cover-image.rotating {
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.song-details {
    text-align: center;
    margin-bottom: 80rpx;
}

.song-title {
    font-size: 40rpx;
    font-weight: 600;
    display: block;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.song-artist {
    font-size: 28rpx;
    opacity: 0.85;
    display: block;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}

/* 进度条 */
.progress-container {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;
}

.time {
    font-size: 24rpx;
    min-width: 80rpx;
    text-align: center;
}

.progress-bar {
    flex: 1;
    height: 10rpx;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 5rpx;
    margin: 0 20rpx;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.progress-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 5rpx;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, #fff 100%);
    border-radius: 5rpx;
    transition: width 0.1s;
    box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
}

.progress-thumb {
    position: absolute;
    top: -7rpx;
    width: 24rpx;
    height: 24rpx;
    background-color: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.4);
}

/* 控制按钮 */
.control-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60rpx;
}

.control-btn {
    font-size: 52rpx;
    margin: 0 40rpx;
    padding: 24rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

.play-btn {
    font-size: 72rpx;
    background-color: rgba(255, 255, 255, 0.35);
    padding: 36rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
}

.control-btn:active {
    transform: scale(0.92);
    background-color: rgba(255, 255, 255, 0.45);
}

/* 音量控制 */
.volume-container {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
}

.volume-icon {
    font-size: 32rpx;
    margin-right: 20rpx;
}

.volume-bar {
    flex: 1;
    height: 6rpx;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3rpx;
    position: relative;
    cursor: pointer;
}

.volume-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3rpx;
}

.volume-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #fff;
    border-radius: 3rpx;
    transition: width 0.1s;
}

.volume-thumb {
    position: absolute;
    top: -5rpx;
    width: 16rpx;
    height: 16rpx;
    background-color: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
}

/* 播放模式 */
.play-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rpx;
}

.mode-btn {
    font-size: 40rpx;
    padding: 16rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s ease;
}

.mode-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.25);
}

.mode-text {
    font-size: 24rpx;
    opacity: 0.85;
}

.mode-btn {
    font-size: 32rpx;
    margin-right: 10rpx;
    padding: 10rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
}

.mode-text {
    font-size: 24rpx;
    opacity: 0.8;
}
</style>
